<template>  
  <div>  
    <h2>{{ 照片名称 }}</h2>  
    <div>  
      <input type="text" v-model="editableName" placeholder="编辑地点名称">  
      <button @click="saveName">保存</button>  
      <button @click="resetName">重置</button>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      照片名称: '地点名称', // 这是从外部获取的或者初始化时设定的照片名称  
      editableName: '' // 这是用户可编辑的输入字段的当前值  
    };  
  },  
  watch: {  
    // 监听editableName的变化，以便在需要时更新照片名称  
    editableName(newVal) {  
      // 在这里可以添加一些逻辑，例如，当用户开始输入时显示保存按钮等  
    }  
  },  
  methods: {  
    saveName() {  
      // 保存用户输入的名称到照片名称  
      this.照片名称 = this.editableName;  
      // 这里可以添加保存的逻辑，比如发送到服务器等  
      this.editableName = ''; // 清空输入框以便下次输入  
    },  
    resetName() {  
      // 重置输入框到照片名称的初始值  
      this.照片名称 = '';  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* 添加一些样式，比如输入框和按钮的样式 */  
</style>


  